/**
 * 导航类
 * gl 2017.12.27
 * @flow
 */
import React, {PureComponent} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Easing,
    Animated,
    StatusBar,
    DeviceEventEmitter,
} from 'react-native';
//测试ThreeScene
import TestScene from './TestScene';
import TwoScene from './TwoScene';
import ThreeScene from './ThreeScene';
import {TabBarItem} from '../widget';
import {Colors} from '../utils';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
class RootScene extends PureComponent {
    localEventListeners=[];
    constructor(props){
        super(props);
    }
    componentDidMount(){
    }
    componentWillUnmount(){
        //do something about clear...
        //移除本地监听
        this.localEventListeners.forEach((v,i)=>{
            v.remove();
        });
    }
    render() {
        return (
            <Navigator/>
        );
    }
}
const TabNavigetor = TabNavigator(
    {
        one: {
            screen: TestScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '第一',
                tabBarIcon: ({ focused, tintColor }) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/u=1290837614,3805990154&fm=27&gp=0.jpg')}
                        selectedImage={require('./img/u=2293746613,4224015857&fm=27&gp=0.jpg')}
                    />
                )
            }),
        },
        two: {
            screen: TwoScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '第二',
                tabBarIcon: ({ focused, tintColor }) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/u=1290837614,3805990154&fm=27&gp=0.jpg')}
                        selectedImage={require('./img/u=2293746613,4224015857&fm=27&gp=0.jpg')}
                    />
                )
            }),
        },
        three: {
            screen: ThreeScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '第三',
                tabBarIcon: ({ focused, tintColor }) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/u=1290837614,3805990154&fm=27&gp=0.jpg')}
                        selectedImage={require('./img/u=2293746613,4224015857&fm=27&gp=0.jpg')}
                    />
                )
            }),
        },
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            activeTintColor: '#246bb6',
            inactiveTintColor: '#747478',
            style: { backgroundColor: '#ffffff',height:54 },
            labelStyle:{fontSize:13},
        },
    }
);

const Navigator = StackNavigator(
    {
        Tab: {screen: TabNavigetor},
    },
    {
        navigationOptions: {
            headerStyle: { backgroundColor: Colors.theme },
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
        },
        transitionConfig: () => ({
            transitionSpec: {
                duration: 300,
                easing: Easing.out(Easing.poly(4)),
                timing: Animated.timing,
            },
            screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps;
                const {index,route} = scene;

                const params = route.params || {};
                const transition = params.transition || 'forHorizontal';
                const isNotNeedAni = params.isNotNeedAni;

                const height = layout.initHeight;
                const width = layout.initWidth;
                //纵向切换
                const translateY = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [height, 0, 0],
                });
                //横向切换
                const translateX = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [width, 0, 0],
                });

                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                });
                if(isNotNeedAni){
                    return;
                }
                if(transition === 'forHorizontal'){
                    return {opacity, transform: [{translateX}]};
                } else {
                    return {opacity, transform: [{translateY}]};
                }
            },
        }),
    }
);


export default RootScene;